<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>赚一下</title>
    <link rel="stylesheet" href="static/css/aui.css">
    <link rel="stylesheet" href="static/css/common.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/turnplate.css">
    <link rel="stylesheet" href="static/css/pay.css">
    <link rel="stylesheet" href="static/css/alert.css">
</head>
<body>
<!--返回上一页-->
<section class="tur-header">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
</section>
<!--赚一下 抽奖转盘-->
<section class="tur-box myBox">
    <div class="isEnoughPrent"> 奖品不足,正在补充中... </div>
    <ul id="lottery">

    </ul>
    <!--<ul class="cj1">
        <script type="text/x-handlebars-template" id="cj1">
            {{#each this}}
            <li>
                <div>
                    <img src="{{defalut1}}" alt="">
                    <p>{{giftname}}</p>
                </div>
            </li>
            {{/each}}
            <div id="abcd" class="bt1">
                <div>
                    <span>赚</span>
                    <p>中奖率100%</p>
                </div>
            </div>
        </script>
    </ul>-->
    <div class="null"></div>

    <!--无缝滚动-->
    <div class="scroll-list">
        
            <ul id="scroll-list-ul">

            </ul>
        
    
    </div>
    <div class="tur-ruler"></div>
    <ul class="tur-ruler-text">
        <li>1、抽奖一次消费10元现金，抽奖活动仅限现金</li>
        <li>2、现金红包会即时到用户账号，产品则通过快递方式邮寄</li>
        <li>3、每天抽奖五次即可包邮</li>
        <li>4、活动奖品以实物为准</li>
        <li>5、活动解释权归多卖宝APP平台</li>
    </ul>
    <div class="null-footer"></div>
</section>
<div class="tur-mask"></div>
<section class="tur-alert-box">

</section>
<section id="pay-box">
    <div class="pay-mask"></div>
    <div class="pay-alert">
        <div class="close-img">
            <img src="static/img/close.png" alt="">
        </div>
        <div class="pay-title">需支付，请选择支付方式</div>
        <div id="pay-sale-box">
            <div class="pay-text">支付金额</div>
            <div id="pay-sale">10</div>
        </div>
        <div class="wechat-pay-method">
            <div class="img-box">
                <img src="static/img/icon_weixin.png" alt="">
                <span class="wechat-text">微信支付</span>
            </div>
            <input class="aui-radio con-pay-select" checked="" type="radio" name="radio1" value="1">        </div>
        <div class="wechat-pay-method">
            <div class="img-box">
                <img src="static/img/icon_zhifubao.png" alt="">
                <span class="wechat-text">支付宝支付</span>
            </div>

            <input class="aui-radio con-pay-select" type="radio" name="radio1" value="2">
        </div>
        <footer id="submit-pay">确认支付</footer>
    </div>
</section>
<!--中奖名单列表-->
<script type="text/x-handlebars-template" id="scrollPrensent">
    {{#each this}}
    <li class="win-list">恭喜用户{{phone}}赚到了{{giftname}}</li>
    {{/each}}
</script>
<!--奖品列表-->
<script id="lottery-template" type="text/x-handlebars-template">
    {{#each this}}
    <li class="lottery-unit">
        <img src="{{defalut1}}" alt="">
        <div>{{giftname}}</div>
        <div class="mask"></div>
    </li>
    {{/each}}
</script>
<script type="text/x-handlebars-template" id="tur-alert-box">
    <img src="static/img/clone.png" class="tur-close-alert" alt="">
    <div class="tur-alert-content">
        <div class="tur-text">{{giftname}}</div>
        <img class="gift-img" src="{{defalut1}}" alt="">
        <img class="gift-pull" src="static/img/tur_get.png" alt="">
    </div>
</script>
<script src="lib/jquery-3.0.0.min.js"></script>
<script src="lib/handlebars-v4.0.10.js"></script>
<script src="lib/scroll.js"></script>
<script src="static/js/alert.js"></script>
<script src="static/js/config.js"></script>
<script src="static/js/function.js"></script>
<script src="static/js/common.js"></script>
<!--<script src="static/js/luckDraw.js"></script>-->
<script>
    /**
     * Created by Administrator on 2017/9/21.
     */

    /**
     * winnerId 中奖Id，包含用户信息和中奖信息
     * winnerType 中奖的类型，0为物品，1为现金
     * */
    var winnerId='',winnerType = '' ;

    /*奖品列表*/
    var lotteryTpl = $('#lottery-template').html();
    var lotteryCmp = Handlebars.compile(lotteryTpl);
    /*中奖名单*/
    var personTpl = $('#scrollPrensent').html();
    var personCmp = Handlebars.compile(personTpl);

    /*中奖内容*/
    var lotteryAlertTpl = $('#tur-alert-box').html();
    var lotteryAlertCmp = Handlebars.compile(lotteryAlertTpl);

    var loading = dialog.loading();
    $.ajax({
        url:C.interface.giftLists,
        type: 'post',
        dataType: 'json',
        data: {
            token: C.token
        },
        complete:function () {
            loading.close();
        },
        success: function (response) {
            if (response.errorCode == '200'){
                var data = response.data;
                //奖品列表
                var lotteryList = data.info;
                //中奖人员名单
                var lotteryPerson = data.winners;

                $('#lottery').html(lotteryCmp(lotteryList));
                $('#scroll-list-ul').html(personCmp(lotteryPerson));
                //无缝滚动
                $('.scroll-list li:even').addClass('lieven');
                $(function(){
                    $(".scroll-list").myScroll({
                        speed:40, //数值越大，速度越慢
                        rowHeight:30 //li的高度
                    });
                });

                var clickBtn = "<li class='lottery-unit lottery-unit gift5'>\
            <div class='tur-zhuan'>赚</div>\
                <div>中奖率100%</div>\
                </li>";
                $('.lottery-unit').eq(3).after(clickBtn);
                $('.lottery-unit').eq(0).addClass('lottery-unit-0').addClass('gift1').find('img').addClass('gift1');
                $('.lottery-unit').eq(1).addClass('lottery-unit-1');
                $('.lottery-unit').eq(2).addClass('lottery-unit-2').addClass('gift3').find('img').addClass('gift3');
                $('.lottery-unit').eq(3).addClass('lottery-unit-7');
                $('.lottery-unit').eq(5).addClass('lottery-unit-3');
                $('.lottery-unit').eq(6).addClass('lottery-unit-6').addClass('gift7');
                $('.lottery-unit').eq(7).addClass('lottery-unit-5');
                $('.lottery-unit').eq(8).addClass('lottery-unit-4').addClass('gift9');

                $(".gift5").bind('click',function (event) {
                    event.preventDefault();
                    $('.pay-mask').show(200);
                    $('#pay-box').show(200);
                });

                $('.close-img>img').click(function () {
                    $('.pay-mask').hide(200);
                    $('#pay-box').hide(200);
                });

                $('#submit-pay').click(function () {
                    /**
                     * 支付类型
                     * */
                    var payType = $('input[name=radio1]:checked').val();

                    $('.pay-mask').hide();
                    $('#pay-box').hide();
                    //开始抽奖
                    //goLottery();
                    //拉起支付
                    goPay(0.01,0,payType,'goLottery','0','赚一下','2');
                });



            }
        }
    });


    /**
     * 这里调用抽奖的方法
     * */
    function goLottery() {
        lottery.init('lottery');
        if (lottery.click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
            return false;
        } else {
            lottery.getLottery();
            return false;
        }
    }

    var lottery = {
        place: 0, //请求后指定停留在某个位置
        click: false, //默认值为false可抽奖，防止重复点击
        index: -1, //当前转动到哪个位置，起点位置
        count: 0, //总共有多少个位置
        timer: 0, //setTimeout的ID，用clearTimeout清除
        speed: 20, //初始转动速度
        times: 0, //转动次数
        cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1, //中奖位置
        init: function(id) {
            if ($("#" + id).find(".lottery-unit").length > 0) {
                $lottery = $("#" + id);
                $units = $lottery.find(".lottery-unit");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-" + this.index).addClass("active");
            };
        },
        roll: function() {
            var index = this.index,
                    count = this.count,
                    lottery = this.obj;
            $(lottery).find(".lottery-unit-" + index).removeClass("active");
            index += 1;
            if (index > count - 1) {
                index = 0;
            };
            $(lottery).find(".lottery-unit-" + index).addClass("active");
            this.index = index;
            return false;
        },
        stop: function() {
            lottery.times += 1;
            lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化
            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
                clearTimeout(lottery.timer);
                lottery.prize = -1;
                lottery.times = 0;
                lottery.click = false;
                //可以在这个位置写上中奖弹框，这个是转盘停止时触发事件
                //console.log('您抽中了第' + lottery.place + '个奖品');
                giftShow();
                //关闭中奖弹框
                $('.tur-close-alert').click(giftClose);
                $('.gift-pull').click(function () {
                    jumpDiffFun(winnerType);
                });
            } else {
                if (lottery.times < lottery.cycle) {
                    lottery.speed -= 10;
                } else if (lottery.times == lottery.cycle) {
                    //lottery.place = Math.random() * (lottery.count) | 0; //案例中奖物品通过一个随机数生成
                    lottery.prize = lottery.place;  //这个可以通过ajax请求回来的数据赋值给lottery.place
                } else {
                    if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                        lottery.speed += 110;
                    } else {
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed < 40) {
                    lottery.speed = 40;
                };
                lottery.timer = setTimeout(lottery.stop, lottery.speed); //循环调用
            }
            return false;
        },
        getLottery: function() {//ajax请求中奖接口，本案例注释便于案例正常展示效果，实际中可参考注释的代码

            $.ajax({
                url: C.interface.choujiang,
                type: 'post',
                dataType: 'json',
                data: {
                    token: C.token
                },
                success:function (response) {
                    if (response.errorCode == '200'){
                        var data = response.data;
                        /**
                         * value中奖奖品Id
                         * winnerId 中奖人Id
                         * */
                        var value = parseInt(data.gift.activity_id);
                        winnerId = data.winnerId;
                        winnerType = data.gift.type;
                        console.log(winnerType);
                        switch (value){
                            case 1 :
                                lottery.place = 0;
                                break;
                            case 2 :
                                lottery.place = 1;
                                break;
                            case 3 :
                                lottery.place = 2;
                                break;
                            case 4 :
                                lottery.place = 7;
                                break;
                            case 5 :
                                lottery.place = 3;
                                break;
                            case 6 :
                                lottery.place = 6;
                                break;
                            case 7 :
                                lottery.place = 5;
                                break;
                            case 8 :
                                lottery.place = 4;
                                break;
                        }

                        /*中奖弹框内容填充*/
                        $('.tur-alert-box').html(lotteryAlertCmp(data.gift));
                    }else {
                        dialog.tusiError(response.errorMsg);
                    }
                }
            });
            lottery.speed = 100;
            lottery.stop(); //转圈过程不响应click事件，会将click置为false
            lottery.click = true; //一次抽奖完成后，设置click为true，可继续抽奖
        }
    };

    
    function jumpDiffFun(winnerType) {
        console.log(winnerType);
        if (winnerType == 1){
            //发请求
            var loading = dialog.loading();
            $.ajax({
                url: C.interface.giftAdressUpdata,
                type: 'POST', //GET
                data: {
                    id:winnerId,
                    type:winnerType,
                    token:C.token
                },
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (response) {
                    if (response.errorCode == '200'){
                        dialog.tusiSuccess('领取成功!');
                        setTimeout(function () {
                            giftClose();
                        },1000)
                    }else {
                        dialog.tusiError(response.errorMsg);
                    }

                },
                complete:function () {
                    loading.close();
                },
                error: function (xhr, textStatus) {
                    console.log('错误');
                }
            })
        }else {
            window.location.href = 'turnplate_info.html?winnerId='+winnerId
        }
        //

    }
    
    /**
     * 中奖信息show
     * */
    function giftShow() {
        $('.tur-mask').show();
        $('.tur-alert-box').show();
    }
    /**
     * 中奖信息close
     * */
    function giftClose() {
        $('.tur-mask').hide();
        $('.tur-alert-box').hide();
    }



</script>
</body>
</html>